<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <script defer src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.3.0/dist/turbo.es2017-umd.min.js"></script>
    <script defer src="/js/turbo-fixes.js"></script>
    <style>
        :root {
            --primary-color: #60a5fa; /* 技术蓝主色调 */
            --secondary-color: #e2e8f0; /* 次要文本色，提高亮度 */
            --text-color: #ffffff; /* 主文本色改为纯白，提高对比度 */
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* 增强阴影，提高元素辨识度 */
        }

        body {
            color: var(--text-color);
            padding: 0; /* 移除顶部与底部padding，改用 sticky 导航占位 */
            line-height: 1.7;
            font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
        }

        /* 背景图片样式 - 只保留用户提供的背景图 */
        .bg-image {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .page-container {
            max-width: 900px;
            padding: 0 20px;
            margin-top: 28px; /* 与导航栏保持舒适留白 */
        }

        /* 内容容器 - 完全透明，不添加额外背景 */
        .content-wrapper {
            padding: 10px 0;
        }

        /* 头部信息区域 */
        .about-header {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 30px;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 稍微加深边框 */
        }

        .about-avatar-container {
            flex: 0 0 auto;
        }

        .about-avatar {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--primary-color);
            box-shadow: var(--shadow);
            transition: transform 0.3s ease;
        }

        .about-avatar:hover {
            transform: scale(1.03);
        }

        .about-header-content {
            flex: 1;
            min-width: 300px;
        }

        .about-name {
            font-size: 2.4rem;
            font-weight: 700;
            margin: 0 0 10px 0;
            color: var(--text-color);
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 增加文字阴影，提高辨识度 */
        }

        .about-bio {
            color: var(--secondary-color);
            margin: 0 0 15px 0;
            font-size: 1.1rem;
            max-width: 700px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        /* 社交链接 */
        .social-links {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin: 15px 0 0 0;
        }

        .social-link {
            display: inline-flex;
            align-items: center;
            padding: 6px 16px;
            border-radius: 6px;
            background-color: rgba(0, 0, 0, 0.4); /* 半透黑背景，提高可读性 */
            color: var(--secondary-color);
            text-decoration: none;
            font-size: 0.9rem;
            transition: all 0.2s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .social-link i {
            margin-right: 8px;
            color: var(--primary-color);
        }

        .social-link:hover {
            background-color: rgba(96, 165, 250, 0.2);
            color: var(--text-color);
            border-color: rgba(96, 165, 250, 0.5);
        }

        /* 内容区块样式 */
        .about-section {
            margin-bottom: 35px;
            background-color: rgba(0, 0, 0, 0.3); /* 轻微背景，提高内容区辨识度 */
            padding: 20px;
            border-radius: 8px;
        }

        .about-section-title {
            font-size: 1.6rem;
            font-weight: 600;
            margin: 0 0 20px 0;
            color: var(--primary-color);
            display: flex;
            align-items: center;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        .about-section-title i {
            margin-right: 10px;
            font-size: 1.3rem;
        }

        /* 技能标签 */
        .skill-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .skill-tag {
            background-color: rgba(0, 0, 0, 0.4);
            padding: 6px 16px;
            border-radius: 4px;
            font-size: 0.9rem;
            color: var(--primary-color);
            border: 1px solid rgba(96, 165, 250, 0.3);
            transition: all 0.2s ease;
        }

        .skill-tag:hover {
            background-color: rgba(96, 165, 250, 0.2);
            transform: translateY(-1px);
        }

        /* 详细内容样式 */
        .about-content {
            font-size: 1.05rem;
            color: var(--text-color);
            line-height: 1.8;
        }

        .about-content p {
            margin: 0 0 1.2rem 0;
        }

        .about-content a {
            color: var(--primary-color);
            text-decoration: none;
            border-bottom: 1px dotted var(--primary-color);
        }

        .about-content a:hover {
            border-bottom-style: solid;
        }

        /* 编辑按钮样式 */
        .edit-about-btn {
            display: inline-flex;
            align-items: center;
            margin: 20px 0 0 0;
            padding: 8px 20px;
            background-color: rgba(96, 165, 250, 0.2);
            color: var(--text-color);
            border-radius: 6px;
            text-decoration: none;
            font-size: 0.95rem;
            transition: all 0.2s ease;
            border: 1px solid rgba(96, 165, 250, 0.5);
        }

        .edit-about-btn i {
            margin-right: 8px;
        }

        .edit-about-btn:hover {
            background-color: rgba(96, 165, 250, 0.3);
            color: var(--text-color);
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            body {
                /* 移除小屏顶部间距，保持导航与内容自然分离 */
                padding-top: 0;
            }

            .about-header {
                flex-direction: column;
                text-align: center;
                gap: 20px;
                padding-bottom: 15px;
            }

            .about-avatar {
                width: 140px;
                height: 140px;
            }

            .about-name {
                font-size: 2rem;
            }

            .social-links {
                justify-content: center;
            }

            .about-section-title {
                font-size: 1.4rem;
            }

            .about-section {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
<!-- 只保留用户提供的背景图 -->
<div class="bg-image" th:if="${backgroundImage != null and !#strings.isEmpty(backgroundImage)}" th:style="|background-image: url(${backgroundImage});|"></div>

<!-- 导航栏 -->
<div th:replace="~{fragments/navbar :: navbar}"></div>

<div class="container page-container">
    <div class="content-wrapper">
        <!-- 头部信息区 -->
        <div class="about-header">
            <div class="about-avatar-container">
                <img th:if="${aboutAvatar != null and !aboutAvatar.isEmpty()}" th:src="${aboutAvatar}" class="about-avatar" alt="个人头像">
                <img th:unless="${aboutAvatar != null and !aboutAvatar.isEmpty()}" src="https://picsum.photos/id/1/200" class="about-avatar" alt="默认头像">
            </div>

            <div class="about-header-content">
                <h1 class="about-name" th:text="${aboutName != null ? aboutName : '技术博主'}">技术博主</h1>
                <p class="about-bio" th:text="${aboutBio != null ? aboutBio : '专注于分享技术见解和开发经验的工程师'}">
                    专注于分享技术见解和开发经验的工程师，热爱编程与开源社区。
                </p>

                <div class="social-links" th:if="${socialLinks != null and !socialLinks.isEmpty()}">
                    <a th:each="link : ${socialLinks}" th:href="${link.url}" class="social-link" target="_blank">
                        <i class="bi" th:classappend="${link.icon}"></i>
                        <span th:text="${link.name}">链接</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- 技能标签区 -->
        <div class="about-section" th:if="${aboutSkills != null and !aboutSkills.isEmpty()}">
            <h2 class="about-section-title">
                <i class="bi bi-code-slash"></i>技术栈
            </h2>
            <div class="skill-tags">
                <span class="skill-tag" th:each="skill : ${aboutSkills}" th:text="${skill}">Java</span>
            </div>
        </div>

        <!-- 详细内容区 -->
        <div class="about-section" th:if="${aboutContent != null and !aboutContent.isEmpty()}">
            <h2 class="about-section-title">
                <i class="bi bi-person-circle"></i>关于我
            </h2>
            <div class="about-content" th:utext="${aboutContent}">
                <p>我是一名拥有5年经验的全栈开发者，专注于企业级应用开发和云原生技术。</p>
                <p>主要技术方向包括：微服务架构、分布式系统、容器化部署等。</p>
                <p>欢迎通过社交链接与我联系，共同探讨技术问题。</p>
            </div>
        </div>

        <!-- 编辑按钮 -->
        <div sec:authorize="hasRole('ADMIN')">
            <a href="/admin/about" class="edit-about-btn">
                <i class="bi bi-pencil"></i> 编辑资料
            </a>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 引入Turbo修复脚本 -->
<script defer src="/js/turbo-fixes.js"></script>
<script th:inline="javascript">
    // 页面加载和Turbo导航处理
    function initAboutPage() {
        console.log('关于页面初始化');
        
        // 强制重新应用CSS变量和样式
        document.documentElement.style.setProperty('--primary-color', '#60a5fa');
        document.documentElement.style.setProperty('--secondary-color', '#e2e8f0');
        document.documentElement.style.setProperty('--text-color', '#ffffff');
        
        // 强制重新计算布局和样式
        const body = document.body;
        if (body) {
            // 临时改变display属性强制重新渲染
            const originalDisplay = body.style.display;
            body.style.display = 'none';
            body.offsetHeight; // 强制重新计算
            body.style.display = originalDisplay;
        }
        
        // 确保容器样式正确应用
        const container = document.querySelector('.page-container');
        if (container) {
            container.style.maxWidth = '900px';
            container.offsetHeight; // 触发重新渲染
        }
        
        // 确保背景图片正确显示
        const bgImage = document.querySelector('.bg-image');
        if (bgImage) {
            if (bgImage.style.backgroundImage) {
                bgImage.style.backgroundSize = 'cover';
                bgImage.style.backgroundPosition = 'center';
                bgImage.style.backgroundRepeat = 'no-repeat';
            }
            bgImage.offsetHeight; // 触发重新渲染
        }
        
        // 强制重新应用所有关键元素的样式
        const aboutHeader = document.querySelector('.about-header');
        if (aboutHeader) {
            aboutHeader.offsetHeight; // 触发重新渲染
        }
        
        const aboutSections = document.querySelectorAll('.about-section');
        aboutSections.forEach(section => {
            section.offsetHeight; // 触发重新渲染
        });
    }
    
    // 首次加载
    document.addEventListener('DOMContentLoaded', initAboutPage);
    
    // Turbo导航时重新初始化
    document.addEventListener('turbo:load', initAboutPage);
    document.addEventListener('turbo:render', initAboutPage);
</script>
</body>
</html>
